<template>
  <el-row class="body">
    <el-col class="page">
      <div>
        <el-card class="box-card page" shadow="always">
          <img
              :src="loginHeader"
              class="image"
          />
          <div class="page">
            <el-form
                label-position="top"
                :model="formLabelAlign"
                style="width: 350px"
                size="large"
            >
              <el-form-item label="用户" required>
                <el-input :prefix-icon="User" placeholder="User" v-model="formLabelAlign.name"/>
              </el-form-item>
              <el-form-item label="密码" required>
                <el-input :prefix-icon="Key"  type="password" show-password placeholder="Password" v-model="formLabelAlign.password"/>
              </el-form-item>
            </el-form>
          </div>
          <div class="btn">
            <el-button size="large" color="#6C63FF" :loading="loading" @click="loginFunc">登录</el-button>
          </div>

        <div class="btm">
          <el-text size="default">没有账号？</el-text>
          <el-link type="primary" :underline="false" href="/register"><el-icon><Right /></el-icon> 去注册</el-link>
        </div>
        </el-card>

      </div>

    </el-col>
  </el-row>

</template>

<script setup>
import {reactive, ref} from 'vue'
import {useRouter} from "vue-router";
import {login} from "@/api/user";
import { User, Key} from '@element-plus/icons-vue'
import loginHeader from '@/assets/icons8-doge-100.png'
import {ElMessage} from "element-plus";

const router = useRouter();
const loading = ref(false)

const formLabelAlign = reactive({
  name: '',
  password: '',
})

function loginFunc() {
  loading.value = true;
  login(formLabelAlign.name, formLabelAlign.password).then((res) => {
    if (res.data.code === 0) {
      ElMessage.success("登录成功");
      router.push("/");
    }
  }).catch(() => {
    ElMessage.error("登录失败")
  }).finally(() => {
    loading.value = false;
  })
}
</script>

<style scoped lang="less">
.body{
  background-color: #3c3f41;
  height: 100%;
}

.page{
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

}

.box-card{
  width: 500px;
  height: 500px;
  align-items: start;
  opacity: 1;
}

.btn{
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  button{
    width: 100%;
    border: 0;
  }
}
.image{
  width: 100px;
  margin-left: 125px;
  margin-bottom: 50px;
}

.btm{
  text-align: center;
  margin-top: 15px;
}
</style>